<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{width:750px;overflow: hidden;}
        .box{width:250px;border: solid 1px black;float: left;text-align: center;box-sizing: border-box;}
        .box img{width:80%}
        .box p{line-height: 20px;height:40px;overflow: hidden;}

        .pageBox{display:flex;width:700px;justify-content: space-around;align-items:center;}
        .pageBox>span{display:block;width:100px;height:40px;line-height:40px;text-align:center;border:solid 1px black;border-radius:10px;}
        .pageList{display:flex;}
        .pageList span{width:40px;height:40px;border:solid 1px black;display:block;line-height:40px;text-align:center;margin: 0 10px;}
    </style>
</head>
<body>
    <h1>这是商品列表，也叫搜索结果页</h1>
    <a href="./cart.html">去结算</a>
    <div class="cont"></div>
    <div class="pageBox">
        <span class="prev">上一页</span>
        <div class="pageList">
        </div>
        <span class="next">下一页</span>
    </div>
</body>
<script src="./js/ajax.js"></script>
<script>
    class Page{
        constructor(ops){
            this.num = ops.num || 3;
            this.index = ops.index || 0;
            this.url = ops.url;
            this.prev = ops.prev;
            this.next = ops.next;
            this.cont = ops.cont;
            this.pageList = ops.pageList;

            this.load();
            this.addEvent();
        }
        addEvent(){
            const that = this;
            this.pageList.onclick = function(eve){
                const e = eve || window.event;
                const target = e.target || e.srcElement;
                if(target.tagName === "SPAN"){
                    that.setActive(target);
                    that.index = (target.index);
                    that.render();
                }
            }
            this.prev.onclick = function(){
                if(that.index === 0){
                    that.index = 0;
                }else{
                    that.index--
                }
                that.render();
                that.setActive(that.pageList.children[that.index]);
            }
            this.next.onclick = function(){
                if(that.index === that.maxPage-1){
                    that.index = that.maxPage-1;
                }else{
                    that.index++
                }
                that.render();
                that.setActive(that.pageList.children[that.index]);
            }
        }
        setActive(target){
            [...this.pageList.children].forEach(val=>{
                val.style.background = "none";
                val.style.color = "#000";
            })
            target.style.background = "#55f";
            target.style.color = "#fff";
        }
        load(){
            ajax("http://localhost:3000/getGoods", (res)=>{
                this.res = JSON.parse(res).data;
                this.render();
                this.createPage();
            })
        }
        createPage(){
            this.maxPage = Math.ceil(this.res.length / this.num);

            let str = "";
            for(let i=0;i<this.maxPage;i++){
                str += `<span>${i+1}</span>`
            }
            this.pageList.innerHTML = str;

            for(let i=0;i<this.pageList.children.length;i++){
                this.pageList.children[i].index = i;
            }
            this.setActive(this.pageList.children[this.index]);
        }
        render(){
            let str = "";

            // 0~3      0index*3num ~ 0index*3num+3num
            // 3~6      1index*3num ~ 1index*3num+3num
            // 6~9      2index*3num ~ 2index*3num+3num
            // 9~12     3index*3num ~ 3index*3num+3num

            for(
                let i = this.index * this.num;
                i < this.index * this.num + this.num;
                i++
            ){
                if(i < this.res.length){
                    str += `<div class="box">
                                <a href="./detail.html?id=${this.res[i].id}">
                                    <img src="${this.res[i].src}" alt="">
                                    <p>${ (i+1) + this.res[i].name}</p>
                                    <p class="price">${this.res[i].price}</p>
                                </a>
                                <input myid="${this.res[i].id}" type="button" value="加入购物车" class="addCart">
                            </div>`;
                }
            }
            this.cont.innerHTML = str;
        }
    }

    new Page({
        url:"",
        num:3,
        index:0,
        prev:$(".prev"),
        next:$(".next"),
        cont:$(".cont"),
        pageList: $(".pageList")
    })

    class AddCart{
        constructor(){
            this.cont = $(".cont");
            this.addEvent();
        }
        addEvent(){
            const that = this;
            this.cont.onclick = function(eve){
                const e = eve || window.event;
                const target = e.target || e.srcElement;
                if(target.className.includes("addCart")){
                    that.id = target.getAttribute("myid");
                    that.price = target.parentNode.querySelector(".price").innerText;
                    that.setLocal();
                }
            }
        }
        setLocal(){
            // localStorage.setItem("");

            // 多条商品？
            // 多个商品存一个存储，以数组的形式
            // 一个商品要存哪些数据？id，num，
            // 一个商品两个信息，以对象形式
            // 最终数据格式：[{id:1,num:1},{id:2,num4},{},...]

            // 一个商品点加入购物车两次
            // 如何得知一个商品被点击了多次，先判断数组中是否存在
            // 数组从哪来？先获取

            // 将来存什么，此时就读什么
            let goods = localStorage.getItem("goods");
            goods = goods ? JSON.parse(goods) : [];

            let i;
            const flag = goods.some((val,idx)=>{
                i = idx;
                return val.id === this.id;
            })

            if(flag){
                goods[i].num++
            }else{
                goods.push({
                    id:this.id,
                    num:1,
                    price:this.price-0,
                    check:false
                })
            }
            // 操作完数组后，一定要将数组存到本地存储中
            localStorage.setItem("goods", JSON.stringify(goods));
        }
    }
    new AddCart();

    function $(select){
        return document.querySelector(select);
    }

</script>
</html>